<template>
  <div class="login">
    <el-row>
      <el-col :span="16" class="left">
        <p class="title">Build website using this template.</p>
      </el-col>
      <el-col :span="8" class="right">
        <el-card>
          <div class="loginAva">
            <div class="box">
              <img src="../assets/login.jpg" alt />
            </div>
          </div>
          <el-form
            label-width="60px"
            :model="loginForm"
            status-icon
            :rules="loginFormRules"
            ref="loginFormRef"
          >
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="loginForm.email"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="loginForm.password"></el-input>
            </el-form-item>

            <el-form-item class="btn">
              <el-button type="primary" @click="submitForm()" size="mini">登录</el-button>
              <el-button size="mini" @click="resetForm()">重置</el-button>
            </el-form-item>
          </el-form>
          <p class="remark">
            还没帐号？
            <span @click="register">立即注册</span>
          </p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        email: '',
        password: ''
      },
      loginFormRules: {
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.loginFormRef.validate(valid => {
        if (valid) {
          this.$axios
            .post('/api/logAndReg/login', this.loginForm)
            .then(result => {
              this.$message({
                type: result.data.type,
                message: result.data.msg
              })
              if (!this.isEmpty(result.data.token)) {
                window.sessionStorage.setItem('token', result.data.token)
                this.$router.push({ name: 'Home' })
              }
              return
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.loginFormRef.resetFields()
    },
    register() {
      this.$router.push({ name: 'Register' })
    },
    isEmpty(value) {
      return (
        value === undefined ||
        value === null ||
        (typeof value === 'object' && Object.keys(value).length === 0) ||
        (typeof value === 'string' && value.trim().length === 0)
      )
    }
  }
}
</script>
<style scoped>
.login {
  height: 100%;
  background: url(../assets/bg.jpg) no-repeat;
  background-size: 100%;
  background-position: center -300px;
}
.el-row,
.el-col {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.right,
.left {
  position: relative;
}
.title {
  width: 70%;
  height: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-bottom: 0px;
  font-size: 59px;
  line-height: 1;
  font-weight: 300;
  color: aliceblue;
}
.el-card {
  width: 75%;
  height: 330px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
}
.btn {
  float: right;
}
.loginAva {
  height: 60px;
  margin-bottom: 20px;
}
.box {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 50%;
}
.box > img {
  width: 100%;
}
.remark {
  width: 100%;
  font-size: 12px;
  margin-bottom: 0px;
  float: right;
  text-align: right;
}
.remark > span {
  color: aquamarine;
  cursor: pointer;
}
</style>
